<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            figure {
                width: 150px;
                height: 150px;                
                font-size: 25px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;

            }
            .box-1 {
                -webkit-transform: rotateY(0deg);
                -webkit-transition: all 1s;                
                background: #ccc;
            }
            .box-1:hover {
                -webkit-transform: rotateY(180deg);
                -webkit-transition: all 1s;
            }
            .big-box {
                width: 100px;
                height: 100px;
                background: #ccc;
                border: 1px dashed #000;
            }
            .small-box {
                width: 100%;  
                height: 100%;                
                background: #bb5558;
                -webkit-transition: all 1s;
                -webkit-transform: skewX(10deg);
            }
            .small-box:hover {
                -webkit-transform: scale(0.75);
                -webkit-transition: all 1s;
            }
            .box-2 {
                background: #000;
                color: #fff;
                -webkit-transition: all 1s;
                -webkit-transform: skewX(10deg);
            }
            .box-2:hover {
                -webkit-transform: translateX(-10px);
                -webkit-transition: all 1s;
            }
            .box-3 {
                background: #009900;
                -webkit-transition: all 1s;
                -webkit-transform: skewX(10deg);
            }
            .box-3:hover {
                -webkit-transform: skewX(100deg);
            }
            .small-box-1 {
                background: #fff;
                -webkit-transform: skew(10deg, 20deg) translateX(20px) rotate(90deg);
            }
            .cubic {margin-left: 100px;color:#fff;position: relative;}
            .cubic1 {background: #33cc54;transform: rotate(-45deg) skew(15deg, 15deg);position: absolute;margin: 0;}
            .cubic2 {background: #2db34a;transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);position: absolute;top: 0px;left: 0px;margin: 0;}
            .cubic3 {background: #26973e;transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);position: absolute;top: 0px;left: 0px;margin: 0;}
        </style>
    </head>
    <body>
        <figure class="box-1">RotateY</figure>
        <figure class="box-2">Translate</figure>
        <figure class="box-3">Skew</figure>
        <div class="big-box">
            <div class="small-box">
                <div class="small-box small-box-1">
                    Scale
                </div>
            </div>
        </div>
        <div class="cubic">
            <figure class="cubic1">1</figure>
            <figure class="cubic2">2</figure>
            <figure class="cubic3">3</figure>
        </div>
    </body>
</html>
